<%- include("layouts/html_start") -%>
<div class="w-full max-w-md bg-white p-8 rounded-lg shadow-md mx-auto">
    <h2 class="text-2xl font-bold mb-6 text-center">新增产品</h2>
    
    <form id="productForm" class="space-y-4" method="post">
        <input type="hidden" name="csrf_token" value="<%= csrf_token %>">
        <div>
            <label for="productNo" class="block text-sm font-medium text-gray-700 mb-1">
                产品编码 <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="productNo" 
                name="productNo" 
                required
                pattern="^P[0-9]{6}"
                oninvalid="this.setCustomValidity('请输入形式正确的产品编码！')" 
                oninput="this.setCustomValidity('')" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
        </div>

        <div>
            <label for="name" class="block text-sm font-medium text-gray-700 mb-1">
                产品名称 <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="name" 
                name="name" 
                required
                oninvalid="this.setCustomValidity('请输入名称！')" 
                oninput="this.setCustomValidity('')" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
        </div>

        <div>
            <label for="brand" class="block text-sm font-medium text-gray-700 mb-1">
                品牌 <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="brand" 
                name="brand"
                required
                oninvalid="this.setCustomValidity('请输入品牌！')" 
                oninput="this.setCustomValidity('')" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
        </div>

        <div>
            <label for="spec" class="block text-sm font-medium text-gray-700 mb-1">
                型号规格 <span class="text-red-500">*</span>
            </label>
            <input 
                type="text" 
                id="spec" 
                name="spec"
                required
                oninvalid="this.setCustomValidity('请输入型号规格！')" 
                oninput="this.setCustomValidity('')" 
                class="w-full px-3 py-2 border border-gray-300 rounded-md focus:outline-none focus:ring-2 focus:ring-blue-500"
            >
        </div>

        <div id="errorMessage" class="text-red-500 hidden">
            
        </div>

        <button 
            type="submit" 
            class="w-full bg-blue-500 text-white py-2 rounded-md hover:bg-blue-600 transition duration-300"
        >
            提交
        </button>
    </form>
</div>
<%- include("layouts/html_end") -%>